<template>
  <!-- 卡面管理 主页面 -->
  <app-container>
    <div class="mt10">
      <app-block>
        <zm-form :model="searchForm" ref="searchForm" inline>
          <zm-form-item prop="name">
            <zm-input
              v-model="searchForm.name"
              placeholder="请输入卡面名称"
              class="w200"
            ></zm-input>
          </zm-form-item>
          <zm-form-item prop="status">
            <zm-data-select
              v-model="searchForm.status"
              :list="typeStatus"
              class="w150"
              clearable
              placeholder="卡面状态"
              str
            >
            </zm-data-select>
          </zm-form-item>
          <zm-form-item prop="startTime">
            <zm-date-picker  type="datetimerange" :target="searchForm" start-key="startDate" end-key="endDate" />
          </zm-form-item>
          <zm-form-item>
            <zm-button @click="onAdd" t="add"></zm-button>
            <zm-button @click="onSearch" t="search"></zm-button>
            <zm-button @click="handleResert" t="reset"></zm-button>
          </zm-form-item>
        </zm-form>
        <zm-table-data
          :data="tableParams.data"
          :columns="columns"
          :fetch="loadList"
          :table-params="tableParams"
          :show-page="true"
        >
        </zm-table-data>
      </app-block>
      <new-panel
        v-if="newParams.visible"
        v-model="newParams.visible"
        :obj="newParams.obj"
        @refresh="loadList"
      ></new-panel>
    </div>
  </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import { typeStatus, columns } from './const'
import cardSurface from '@/api/src/cardSurface'
import NewPanel from './components/New'
export default {
  name: 'CardSurfaceManagement',
  components: { NewPanel },
  mixins: [tableMixin],
  data() {
    return {
      typeStatus,

      searchForm: {
        name: '', // 卡面名称
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        status: '' // 卡面类型
      },

      detailParams: {
        visible: false,
        id: '',
        obj: {}
      },
      newParams: {
        visible: false,
        obj: {}
      }
    }
  },
  computed: {
    columns() {
      return columns(this)
    }
  },
  watch: {},
  created() {},
  methods: {
    async loadList() {
      const _res = await cardSurface.getPageList(this.assignQuery(this.searchForm))
      this.initialTableData(_res.list, _res.count)
    },
    onAdd() {
      this.newParams = {
        visible: true,
        obj: {}
      }
    },
    // 新增/编辑
    onEdit(row) {
      this.newParams = {
        visible: true,
        obj: row
      }
    },
    // 详情
    onDetail(row) {
      this.detailParams = {
        visible: true,
        obj: row,
        id: row.id
      }
    },
    // 删除
    async onDel(row) {
      this.$confirm('确定删除当前卡面', '删除', {
        type: 'warning'
      }).then(async () => {
        await cardSurface.delete({ id: row.id })
        this.onSearch()
        this.$message.success('操作成功')
      })
    },
    async onSwitch(row) {
      let status = row.status === '1' ? '2' : '1'
      await cardSurface.setStatus({ id: row.id, status: status })
      this.$message.success('操作成功!')
      this.loadList()
    },
    handleResert() {
      this.searchForm = {
        name: '', // 卡面名称
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        status: '' // 卡面类型
      }
      this.onSearch()
    }
  }
}
</script>

<style scoped lang="scss"></style>
